<template>
    <tn-popup :model-value="props.showPopupCity" open-direction="bottom" height="100vh" :overlay-closeable="false">
        <view class="main">
            <view class="top" :style="{ paddingTop: systemInfo.titleTop + 'px' }">
                <view class="main-title dispaly-center" :style="{ height: systemInfo.sBarHeight + 'px' }">
                    <view class="title dispaly-just-between">
                        <view class="title-left" @click="closePop">
                            <tn-icon name="left" color="#000" size="40" />
                        </view>
                        <view class="title-right dispaly-center">
                            <view class="title-text">选择城市</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="content dispaly" :style="{ height: newsPanelHeight + 'px' }">
                <view class="city-box w-100">
                    <tn-index-list @click="clickIndex" title-bg-color="#fff" title-color="#000" :data="cityData"
                        class="h-100" :sticky-offset-top="systemInfo.titleTop + systemInfo.sBarHeight">
                        <template #default="{ data }">
                            <view class="list-data">
                                <view class="info dispaly-center">
                                    <view class="city">{{ data.name }}</view>
                                </view>
                            </view>
                        </template>
                    </tn-index-list>
                </view>

            </view>
        </view>
    </tn-popup>
</template>

<script setup lang="ts">
import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
import { citysIndexed } from '@/config/city'
import { onLoad, onReady } from '@dcloudio/uni-app'
import { ref } from 'vue';
import { getScreenSHeight } from '@/utils/util'

// 城市数据
const cityData = ref<any>(citysIndexed)

// 索引点击
const clickIndex = (key: string) => {
    console.log(key)
}

interface PropsType {
    showPopupCity: boolean
}
let systemInfo = uni.getStorageSync('systemInfo')
const props = defineProps<PropsType>()
const emit = defineEmits<{
    close: [show: boolean]
}>()
// 关闭弹窗
const closePop = () => emit('close', false)

// 获取屏幕剩余高度
const newsPanelHeight = ref<number>(0)
onReady(async () => {
    newsPanelHeight.value = await getScreenSHeight(uni.getStorageSync('systemInfo').sBarHeight) as number
})
</script>
<style lang="scss" scoped>
.list-data {

    .info {

        .city {
            font-size: 23rpx;
        }
    }
}



.content {}
</style>